<template>
  <div class="nav__list">
    <dl class="m-one2two">
      <dd class="goodsitem" v-for="item in list" :key="item.gid">
        <div class="picitem">
          <a href class="imgwrap">
            <img
              :src="item.image"
            />
            <p class="bottomtips f-els-1 z-greylight">仅剩5件</p>
          </a>
          <div class="toptag">
            <img
              src="https://kaola-haitao.oss.kaolacdn.com/11f24ade-d4f6-45b4-8827-da57ea1a4f5b.png?x-oss-process=image/resize,w_150,h_0/quality,q_100"
              class="img"
            />
          </div>
        </div>
        <div class="descitem">
          <p class="tit">
            <a href class="link">{{item.title}}</a>
          </p>
          <div class="pricewrapw">
            <div class="pricewrap">
              <div class="price">
                <div class="bigPriceMoneyIcon">￥</div>
                <div class="bigPrice">{{item.price}}</div>
              </div>
              <div class="price">
                <div class="grayPrice deprecated">￥168</div>
              </div>
            </div>
          </div>
          <div class="bottomtagsw">
            <div class="bottomtags">
              <span class="benefitpoint" style=" color: #fff;">满3件享7折</span>
              <span class="benefitpoint" style=" color: #fff;">特价</span>
              <span class="goodComment">100%好评</span>
            </div>
          </div>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[]
    };
  },
  mounted() {
    let url = "http://127.0.0.1:8080/data/new.json";
    this.$axios.get(url).then((ret) => {
      this.list = ret.data;
      //console.log(this.list)
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
.nav__list {
  position: relative;
  min-height: 400px;
  background-color: #fff;
  .m-one2two {
    overflow: hidden;
    background-color: #fff;
    padding: 10px 10px 0;
    border-bottom: 1px solid #efefef;
    .goodsitem {
      position: relative;
      // display: inline-block;
      width: 50%;
      vertical-align: top;
      float: left;
      background-color: #fff;
      padding: 10px 5px 10px 0;
      border-bottom: 1px solid #efefef;
      font-size: 12px;
      line-height: 16px;
      overflow: hidden;
      .picitem {
        position: relative;
        font-size: 12px;
        line-height: 16px;
        .imgwrap {
          display: block;
          position: relative;
          padding-top: 100%;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: url(//kaola-haitao.oss.kaolacdn.com/9d974e4e-b17d-480b-8333-9fee9cb83f29.png)
              no-repeat center center #fff;
            background-size: 62px 62px;
          }
          .bottomtips.z-greylight {
            background: #f0f0f0;
            color: #333;
            padding: 0 10px;
            width: 200%;
            height: 34px;
            line-height: 34px;
            text-align: center;
            font-size: 20px;
            transform: scale(0.5);
            transform-origin: bottom left;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
          }
        }
        .toptag {
          position: absolute;
          top: 0;
          right: 0;
          img {
            width: 50px;
          }
        }
      }
      .descitem {
        margin-top: 6px;
        .tit {
          font-size: 12px;
          margin-bottom: 3px;
          height: 32px;
          overflow: hidden;
          line-height: 16px;
          .link {
            height: 32px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            text-decoration: none;
            color: #333;
          }
        }
        .pricewrapw {
          height: 40px;
          overflow: hidden;
          .pricewrap {
            width: 100%;
            overflow: hidden;
            line-height: 20px;
            color: #e31436;
            font-size: 0;
            .price {
              line-height: 16px;
              height: 16px;
              overflow: hidden;
              white-space: nowrap;
              display: block;
              margin-top: 4px;
              .bigPriceMoneyIcon {
                color: #f00;
                font-size: 12px;
                float: left;
                margin-top: 1.3px;
                margin-left: -2px;
              }
              .bigPrice {
                font-family: PingFangSC-Medium;
                color: #f00;
                font-size: 18px;
                float: left;
              }
              .grayPrice {
                text-decoration: line-through;
                font-family: PingFangSC-Medium;
                float: left;
                font-size: 12px;
                color: #999;
              }
            }
          }
        }
        .bottomtagsw {
          overflow: hidden;
          position: relative;
          margin-top: 5px;
          height: 13px;
          .bottomtags {
            width: 200%;
            overflow: hidden;
            font-size: 0;
            transform: scale(0.5);
            transform-origin: top left;
            .benefitpoint {
              background-color: #e31436;
              display: inline-block;
              vertical-align: middle;
              height: 26px;
              padding: 0 4px;
              line-height: 24px;
              font-size: 20px;
              color: #e31436;
              border: 1px solid #e31436;
              border-radius: 1px;
              margin-right: 6px;
            }
            .goodComment {
              display: inline-block;
              vertical-align: middle;
              height: 26px;
              line-height: 26px;
              font-size: 22px;
              color: #888;
            }
          }
        }
      }
    }
  }
}
</style>
